<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-title" content="blinkcat-tub">
    <title>demo</title>
    <style type="text/css">
    body {
        font-size: 16px;
        font-family: 'Microsoft YaHei';
        overflow: hidden;
        margin: 0;
        background: #ccc;
    }
    
    header {
        height: 45px;
        width: 100%;
        line-height: 45px;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        color: #c0c4c7;
        position: absolute;
        z-index: 10;
        background: #33383e;
    }
    
    #page {
        width: 100%;
        overflow: hidden;
        margin: 0 auto;
        top: 45px;
        bottom: 46px;
        position: absolute;
        z-index: 1;
        -webkit-user-select: ​ none;
    }
    
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        background: #fff;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    ul li {
        line-height: 40px;
        padding: 0 10px;
        border-bottom: 1px solid #cccccc;
        text-align: center;
    }
    
    footer {
        height: 45px;
        width: 100%;
        bottom: 0;
        position: absolute;
        z-index: 10;
        background: #fcfcfc;
        border-top: 1px solid #f5f5f5;
    }
    </style>
</head>

<body>
    <header>demo</header>
    <div id="page">
        <ul>
            <li>this is li-1</li>
            <li>this is li-2</li>
            <li>this is li-3</li>
            <li>this is li-4</li>
            <li>this is li-5</li>
            <li>this is li-6</li>
            <li>this is li-7</li>
            <li>this is li-8</li>
            <li>this is li-9</li>
            <li>this is li-10</li>
            <li>this is li-11</li>
            <li>this is li-12</li>
            <li>this is li-13</li>
            <li>this is li-14</li>
            <li>this is li-15</li>
            <li>this is li-16</li>
            <li>this is li-17</li>
            <li>this is li-18</li>
            <li>this is li-19</li>
            <li>this is li-20</li>
            <li>this is li-21</li>
            <li>this is li-22</li>
            <li>this is li-23</li>
            <li>this is li-24</li>
            <li>this is li-25</li>
            <li>this is li-26</li>
            <li>this is li-27</li>
            <li>this is li-28</li>
            <li>this is li-29</li>
            <li>this is li-30</li>
            <li>this is li-31</li>
            <li>this is li-32</li>
            <li>this is li-33</li>
            <li>this is li-34</li>
            <li>this is li-35</li>
            <li>this is li-36</li>
            <li>this is li-37</li>
            <li>this is li-38</li>
            <li>this is li-39</li>
            <li>this is li-40</li>
            <li>this is li-41</li>
            <li>this is li-42</li>
            <li>this is li-43</li>
            <li>this is li-44</li>
            <li>this is li-45</li>
            <li>this is li-46</li>
            <li>this is li-47</li>
            <li>this is li-48</li>
            <li>this is li-49</li>
            <li>this is li-50</li>
        </ul>
    </div>
    <footer></footer>
</body>
<script type="text/javascript" src="zscroll.js"></script>
<script type="text/javascript">
var t = new zScroll({
    "wrap": '#page',
    onscrollStart: function() {
        // console.log('scrollStart')
    },
    onscrollEnd: function() {
        // console.log('scrollEnd')
    }
});
</script>

</html>
